<template>
<rx-dialog @cancel="cancel" @ok="ok">
    <draggable
        :list="curList"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        handle=".sort-list-row"
        @start="onStart"
        @end="onEnd"
    >
        <template #item="{ element }">
            <div class="sort-list-row">
               <rx-icon-show :icon="getIcon(element.background.icon)"></rx-icon-show>
               {{ element.name }}
            </div>
        </template>
    </draggable>
</rx-dialog>
</template>

<script>
import draggable from "vuedraggable";
import { RxDialog,Util } from '@lowcode/jpaas-base-lib' ;
export default {
    name: "QuickSortDialog",
    props:{
        list:{}
    },
    components:{
        RxDialog,draggable
    },
    data(){
        return {
            curList:[]
        }
    },
    created(){
        this.curList = Util.deepClone(this.list)
    },
    methods:{
        getIcon(icon){
            if(typeof icon === "string"){
                try {
                    let _icon = new Function(`return ${icon}`)()
                    return _icon.icon || icon ;
                }catch (e) {
                    return icon ;
                }
            }
        },
        cancel(){
            Util.closeWindow(this)
        },
        ok(vm){
            vm.loading = false;
            Util.closeWindow(this,'ok',this.curList)
        }
    }
}
</script>

<style scoped>
.sort-list-row{
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.sort-list-row:hover{
    background-color: rgba(0,0,0,.1);
    color: #4d9eff;
}
.chosenClass{
    background-color: #4d9eff;
    color: #fff;
}
</style>
